﻿<link href="/UI/css/components/components.min.css" rel="stylesheet" />
<template>
    <div class="v-countdown unselectble" selectble="unselectble">
        <div class="vc-group" v-for="g in groups" :class="{urgent:g.isUrgent}">
            <ul v-for="n in g.numArray">
                <li class="vc-fake">9</li>
                <li>
                    <div class="up">
                        <div>0</div>
                    </div>
                    <div class="down">
                        <div>0</div>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <div>1</div>
                    </div>
                    <div class="down">
                        <div>1</div>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <div>2</div>
                    </div>
                    <div class="down">
                        <div>2</div>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <div>3</div>
                    </div>
                    <div class="down">
                        <div>3</div>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <div>4</div>
                    </div>
                    <div class="down">
                        <div>4</div>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <div>5</div>
                    </div>
                    <div class="down">
                        <div>5</div>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <div>6</div>
                    </div>
                    <div class="down">
                        <div>6</div>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <div>7</div>
                    </div>
                    <div class="down">
                        <div>7</div>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <div>8</div>
                    </div>
                    <div class="down">
                        <div>8</div>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <div>9</div>
                    </div>
                    <div class="down">
                        <div>9</div>
                    </div>
                </li>
            </ul>
            <span>{{g.gname}}</span>
        </div>
    </div>
</template>
<script>
    vm = {
        mounted: function () {
            var $gs=this.$el.children;
            for (var i = this.groups.length-1; i >-1; i--) {
                this.groups[i].$gem = $gs[i];
                this.groups[i].$emArray[0] = $gs[i].children[0];
                this.groups[i].$emArray[1] = $gs[i].children[1];

                $gs[i].children[0].children[this.groups[i].numArray[0] + 1].className = "vc-start";
                $gs[i].children[1].children[this.groups[i].numArray[1] + 1].className = "vc-start";

                if (this.groups[i].numArray.length == 3) {
                    this.groups[i].$emArray[2] = $gs[i].children[2];
                    $gs[i].children[2].children[this.groups[i].numArray[2] + 1].className = "vc-start";
                }
            }
            if (this.groups[this.groups.length - 1].interval > 0) {
                this._data.click = setInterval(this.play, this.groups[this.groups.length - 1].interval);
                this._data.stoper = setTimeout(this.stop, this.endtime - new Date());
            }
            this.checkWarning();
        },
        props: {
            endtime: {
                type: Date,
                default:new Date()
            },
            up: {
                type: String,
                default:'day'
            },
            down: {
                type: String,
                default:'sec'
            },
            warning_day:{
                typeof:Number,
                default:-1
            },
            warning_hour:{
                type: Number,
                default:3
            }
        },
        data: function () {
            var t = this.endtime.diffOf(new Date());
            var up = this.up == 'month' ? 5 : (this.up == 'day' ? 4 : (this.up == 'hour' ? 3 : (this.up == 'min' ? 2 : 1)));
            var down = this.down == 'hour' ? 3 : (this.down == 'min' ? 2 : 1);
            var r = {
                tm: t,
                upLimit:up,
                downLimit: down,
                groups: [
                    {
                        num: t.month,
                        numArray:("000"+t.month).substr(-2).split(''),
                        $gem:null,
                        $emArray: [],
                        enable: up == 5,
                        gname: '月',
                        warningLine: -1,
                        isUrgent:false,
                        max: 12,
                        interval:-1
                    },
                    {
                        num: t.day,
                        numArray: ("000"+t.day).substr(t.day > 99 ? -3 : -2).split(''),
                        $gem:null,
                        $emArray: [],
                        enable: up > 3,
                        gname: '天',
                        warningLine: this.warning_day,
                        isUrgent:false,
                        max: 365,
                        interval: -1
                    },
                    {
                        num: t.hour,
                        numArray: ("00"+t.hour).substr(-2).split(''),
                        $gem:null,
                        $emArray:[],
                        enable: up > 2 || down == 3,
                        gname: '时',
                        warningLine: this.warning_hour,
                        isUrgent:false,
                        max: 24,
                        interval:-1
                    },
                    {
                        num: t.min,
                        numArray: ("00"+t.min).substr(-2).split(''),
                        $gem:null,
                        $emArray: [],
                        enable: up > 1 && down < 3,
                        gname: '分',
                        warningLine: -1,
                        isUrgent:false,
                        max: 59,
                        interval:60000
                    },
                    {
                        num: t.second,
                        numArray: ("00"+t.second).substr(-2).split(''),
                        $gem:null,
                        $emArray: [],
                        enable: down<2,
                        gname: '秒',
                        warningLine: -1,
                        isUrgent:false,
                        max: 59,
                        interval:1000
                    }
                ],
                click: null,
                stoper:null,
                bgnTime: new Date(),
                started:false
            };

            r.groups = r.groups.filterBy('enable', true);
            r.groups.forEach(function (g) {
                for (var i = 0; i < g.numArray.length; i++) {
                    g.numArray[i] = parseInt(g.numArray[i]);
                }
            });

            return r;
        },
        methods: {
            play: function () {
                if (!this._data.started && (new Date() - this._data.bgnTime) < this.groups[this.groups.length-1].interval) {
                    return;
                }
                this._data.started = true;
                var toFlip = [];
                this.countdown(1, toFlip);

                for (var i = toFlip.length - 1; i > -1; i--) {
                    this.flip(toFlip[i]);
                    toFlip[i].group.num = toFlip[i].num;
                    toFlip[i].group.numArray = toFlip[i].numArray;
                }
                Vue.nextTick(this.checkWarning);
            },
            stop: function () {
                clearInterval(this.click);
            },
            countdown:function(startIndex,toFlip){
                var g = this.groups[this.groups.length - startIndex];
                var nxtNum = g.num - 1;

                if (nxtNum < 0) {
                    nxtNum = g.max;
                    toFlip.push({ group: g, num: nxtNum, numArray: this.getNumArray(nxtNum, g.numArray.length) });

                    if ((startIndex + 1) <= this.groups.length) {
                        this.countdown(startIndex + 1, toFlip);
                    }

                } else {
                    toFlip.push({ group: g, num: nxtNum, numArray: this.getNumArray(nxtNum, g.numArray.length) });
                }
            },
            checkWarning: function () {
                var checkRequired = true;
                var isUrgent = false;

                for (var i = 0; i < this.groups.length; i++) {
                    if (checkRequired) {
                        if (this.groups[i].warningLine > 0 && !this.groups[i].isUrgent) {
                            this.groups[i].isUrgent = this.groups[i].num < this.groups[i].warningLine;
                            isUrgent = this.groups[i].isUrgent;
                            checkRequired = false;
                        }
                    }
                    else {
                        this.groups[i].isUrgent = isUrgent;
                    }
                }
            },
            flip: function (arg) {
                var $ems= arg.group.$emArray;
                var numArrayOld = arg.group.numArray;
                var numArrayNew = arg.numArray;
                for (var i = 0; i < arg.group.$emArray.length; i++) {
                    var ln = $ems[i].children.length;
                    if (numArrayOld[i] + 2 < ln) {
                        $ems[i].children[numArrayOld[i] + 2].className = "";
                    }
                    else {
                        $ems[i].children[1].className = "";
                    }
                    $ems[i].children[numArrayOld[i]+1].className="vc-pre";
                    $ems[i].children[numArrayNew[i]+1].className="vc-active";
                }
            },
            getNumArray: function (num,ln) {
                var strArray = ln < 3 ? ("00" + num).substr(-2) : ("000" + num).substr(-3).split('');
                var numArray = [];
                for (var i = 0; i < strArray.length; i++) {
                    numArray[i] = parseInt(strArray[i]);
                }
                return numArray;
            }
        }
    }
</script>